/**
 * =============================================================================
 * ************   涟漪动画   ************
 * =============================================================================
 */

.mdui-ripple {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;

  /* Ripple */
  &::after {
    position: absolute !important;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity 1s;
    content: "";
    pointer-events: none;
  }

  &:active::after {
    transform: scale(0, 0);
    opacity: 0.1;
    transition: 0s;
  }

  &[disabled] {
    pointer-events: none !important;
  }
}

/* 有背景色的默认使用白色涟漪 */
.mdui-ripple[class*="mdui-color-"] {
  &::after {
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  }
}

/* 白色涟漪 */
.mdui-ripple-white.mdui-ripple::after {
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%) !important;
}

/* 黑色涟漪 */
.mdui-ripple-black.mdui-ripple::after {
  background-image: radial-gradient(circle, #000 10%, transparent 10.01%) !important;
}


/**
 * =============================================================================
 * ************   Ripple 颜色   ************
 * =============================================================================
 */
& {
  .loop-primary-theme(@counter-color) when (@counter-color > 0) {
    .loop-primary-theme((@counter-color - 1));
    @colorName: extract(@globalPrimaryColors, @counter-color);

    // 指定涟漪颜色
    .mdui-ripple-@{colorName} when not (@colorName =null) {
      &.mdui-ripple::after {
        @color: 'color-@{colorName}-500';

        background-image: radial-gradient(circle, rgb(red(@@color), green(@@color), blue(@@color)) 10%, transparent 10.01%) !important;
      }
    }

  }

  .loop-primary-theme(length(@globalPrimaryColors));
}


/**
 * =============================================================================
 * ************   Ripple dark   ************
 * =============================================================================
 */
.layout-theme({

  // 深色主题下使用白色涟漪
  .mdui-ripple::after {
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  }
});